/**
 * 矩形树图
 * TreemapChartC (reactCharts)
 * @author zxy
 * @date  2020-12-10
 */
import React from 'react';
import PropTypes from 'prop-types';
import ReactEcharts from 'echarts-for-react';
import { Spin } from 'antd';
import { NoDataC } from '../../other';
import Color from '../../../css/colors';
import _ from 'lodash';

class TreemapChartC extends React.Component {
  // 入参默认值设置
  static defaultProps = {
    series: undefined,
    height: '100%', // 图形高度默认为父节点的100%
    width: '100%', // 图形宽度默认为父节点的100%
    colors: Color.echart, // 默认系统色
    squareRatio: 0.5 * (1 + Math.sqrt(5)),
    type: 1, // 默认正红负绿模式
  };

  // 返回option
  getOption = (seriesData) => {
    const { width, type, leafDepth } = this.props;
    return {
      series: [
        {
          type: 'treemap',
          top: 'auto',
          right: 'auto',
          bottom: 'auto',
          width: width,
          left: 'auto',
          leafDepth: leafDepth,
          breadcrumb: {
            show: false, // 不展示面包屑
          },
          data: seriesData,
          label: {
            // 全局统一设置每一个矩形标签中的文本样式
            formatter:
              type == 1
                ? (params) => {
                    if (params.data.rate > 0) {
                      // 收益率大于0，显示红色，收益率小于0，显示绿色
                      return '{name|' + params.name + '}' + '\n' + '{rate1|' + Math.floor(params.data.rate * 10000) / 100 + '%' + '}';
                    } else {
                      return '{name|' + params.name + '}' + '\n' + '{rate2|' + Math.floor(params.data.rate * 10000) / 100 + '%' + '}';
                    }
                  }
                : (params) => {
                    return '{name|' + params.name + '}' + '\n' + '{rate3|' + params.data.value + '}';
                  },
            rich: {
              name: {
                // 名称样式
                fontSize: 14,
                lineHeight: 30,
                color: Color.echartItems.title,
              },
              rate1: {
                // 收益率大于0
                fontSize: 22,
                color: Color.debtAndProfit.text[0],
              },
              rate2: {
                // 收益率小于0
                fontSize: 22,
                color: Color.debtAndProfit.text[1],
              },
              rate3: {
                // 正常模式单色彩
                fontSize: 22,
                color: Color.debtAndProfit.text[5],
              },
            },
          },
          levels: [
            {
              itemStyle: {
                // 一级节点样式
                gapWidth: 5,
                borderWidth: 10,
                borderColor: Color.echartItems.treemapBg,
              },
            },
            {
              upperLabel: {
                // 二级节点上一级节点的label样式
                show: true,
                height: 30,
                color: Color.echartItems.title,
                position: [0, 16],
                fontSize: 14,
              },
              itemStyle: {
                // 二级节点样式
                borderWidth: 10,
                gapWidth: 2,
                borderColor: Color.echartItems.treemapTwoBorder,
              },
            },
          ],
        },
      ],
    };
  };

  // 为seriesData数据添加样式
  buildTreeData = (seriesData) => {
    if (seriesData instanceof Array && seriesData.length > 0) {
      seriesData.forEach((element) => {
        if (element.rate != undefined) {
          element.itemStyle = {
            color: element.rate > 0 ? Color.debtAndProfit.area1[0] : Color.debtAndProfit.area1[1],
          };
        } else {
          element.itemStyle = {
            color: Color.debtAndProfit.area1[2],
          };
        }
        if (element.children != undefined) {
          this.buildTreeData(element.children);
        }
      });
    }
  };

  render() {
    const { series, width, height, top, right, bottom, left } = this.props;

    let initStatus = !!series; // 标记是否达到初始化状态(true:可以初始化图表，false：还未获取到数据)

    let seriesData;
    if (initStatus) {
      // 递归构建seriesData
      seriesData = _.cloneDeep(series);
      this.buildTreeData(seriesData);
    }

    return (
      <div>
        <Spin spinning={!initStatus} tip='加载中...'>
          {initStatus ? (
            series.length > 0 ? (
              <ReactEcharts
                option={this.getOption(seriesData)}
                style={{ height: height, width: width }}
                // 是否不跟之前设置的 option 进行合并，默认为 false，即合并。
                notMerge={true}
              />
            ) : (
              <NoDataC />
            )
          ) : (
            <div style={{ height: height, width: width }}></div>
          )}
        </Spin>
      </div>
    );
  }
}

/* 
备注：
  series值为null或undefined时，显示loading状态
  series值为空数组[]时，显示“暂无数据”
  series值为有值的数组时，正常实现图形
*/
TreemapChartC.propsTypes = {
  series: PropTypes.array, // 纵轴数据（[{name:xxxx,value:权重,rate:'收益率',children:[{name:xxxx,value:权重,rate:'收益率',children:[...]},...]},...]）
  height: PropTypes.oneOfType([
    // 图表高度（百分比、数值、auto(自动根据图例数量计算高度)）
    PropTypes.string,
    PropTypes.number,
  ]),
  width: PropTypes.oneOfType([
    // 图表宽度（百分比或数值）
    PropTypes.string,
    PropTypes.number,
  ]),
  type: PropTypes.number, // 1-正红负绿模式  2- 正常模式
};

export default TreemapChartC;
